<template>
  <div style="padding: 20px">
    <Row :gutter="20">
      <i-col :xs="12" :md="10" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <count-to :end="infor.count" count-class="count-style"/>
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" style="margin-top: 10px;">
      <i-col :md="24" :lg="12" style="margin-bottom: 20px;">
        <Card shadow>
          <div class="line-chart" id="income"></div>
        </Card>
      </i-col>
      <i-col :md="24" :lg="12" style="margin-bottom: 20px;">
        <Card shadow>
          <div class="line-chart" id="the-order"></div>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import InforCard from '_c/info-card'
  import CountTo from '_c/count-to'
  let echarts = require('echarts')
  export default {
    name: 'teacher-index',
    components: {
      InforCard,
      CountTo
    },
    data() {
      return {
        inforCardData: [
          // { title: '学生人数', icon: 'md-help-circle', count: 142, color: '#ff9900' },
          { title: '课程总数', icon: 'md-share', count: 0, color: '#ed3f14' },
          { title: '订单总数', icon: 'md-chatbubbles', count: 0, color: '#E46CBB' },
          { title: '累计收入', icon: 'md-map', count: 0, color: '#9A66E4' }
        ],
        IncomeCategory: [],
        IncomeLine: [],
        theOrderCategory: [],
        theOrderLine: []
      }
    },
    created() {
      this.findOrderById()
      this.findOrderTotleById()
      this.courseCount()
      this.orderFindById()
    },
    methods: {
      courseCount() {
        this.$get('/api/api/statistics/teacher/courseCount').then((res) => {
          this.inforCardData[0].count = res.data
        })
      },
      orderFindById() {
        this.$get('/api/order/findById').then((res) => {
          this.inforCardData[1].count = res.data.orderSum
          this.inforCardData[2].count = res.data.income
        })
      },
      findOrderById() {
        this.$get('/api/order/findOrderById').then((res) => {
          this.$nextTick(() => {
            let data = res.data.reverse()
            data.map((item) => {
              this.IncomeCategory.push(`${item.category}月`)
              this.IncomeLine.push(item.line)
            })
            let Income = echarts.init(document.getElementById('income'))
            Income.setOption({
              title: {
                text: '每月订单数量趋势图',
                subtext: '按月度显示本月订单数量',
                x: 'center'
              },
              tooltip: {},
              xAxis: {
                type: 'category',
                data: this.IncomeCategory
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: this.IncomeLine,
                type: 'line'
              }]
            })
          })
        })
      },
      findOrderTotleById() {
        this.$get('/api/order/findOrderTotleById').then((res) => {
          this.$nextTick(() => {
            let data = res.data.reverse()
            data.map((item) => {
              this.theOrderCategory.push(`${item.category}月`)
              this.theOrderLine.push(item.line)
            })
            let theOrder = echarts.init(document.getElementById('the-order'))
            theOrder.setOption({
              title: {
                text: '每月收入总计趋势图',
                subtext: '按月度显示收入金额',
                x: 'center'
              },
              tooltip: {},
              xAxis: {
                type: 'category',
                data: this.theOrderCategory
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: this.theOrderLine,
                type: 'line'
              }]
            })
          })
        })
      }
    }
  }
</script>

<style lang="less">
  .count-style{
    font-size: 40px;
  }
  .line-chart {
    width: 600px;
    height: 300px;
  }
</style>

